<template>
  <draggable
    :list="dataList"
    @end="endDraggable"
    item-key="id"
    handle=".handle"
    ghost-class="ghost"
  >
    <template #item="{ element }">
      <div
        class="flex coverage"
        :class="{ 'coverage-active': currentId === element.id }"
        @click="setActive(element.id)"
      >
        <div class="flex flex-1">
          <el-tooltip
            class="item"
            effect="dark"
            :content="element.isHidden ? '显示' : '隐藏'"
            placement="top"
          >
            <el-button
              circle
              @click.stop="handleChange(element.id, 'isHidden', !element.isHidden)"
            >
              <icon-svg :iconName="element.isHidden ? 'yanjing' : 'biyan'" />
            </el-button>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            :content="element.isLocked ? '解锁' : '锁定'"
            placement="top"
          >
            <el-button
              circle
              @click="handleChange(element.id, 'isLocked', !element.isLocked)"
            >
              <icon-svg :iconName="element.isLocked ? 'kaisuo' : 'suo'" />
            </el-button>
          </el-tooltip>
          <input-editor
            class="mx-1"
            :layerValue="element.layerName"
            @onChangeLayerName="
              (value) => {
                handleChange(element.id, 'layerName', value);
              }
            "
          />
        </div>
        <el-tooltip class="item" effect="dark" content="拖动排序" placement="top">
          <el-button circle class="move handle">
            <icon-svg iconName="tuodong" />
          </el-button>
        </el-tooltip>
      </div>
    </template>
  </draggable>
</template>

<script lang="ts">
import { defineComponent, ref, watch, computed, PropType } from "vue";
import { cloneDeep } from "lodash-es";
import { useStore } from "vuex";
import { IGlobalDataProps } from "@/store/index.ts";
import {
  UPDATE_LAYER_PROPS,
  UPDATE_COMPONENT_LIST,
  UPDATE_CURRENT_ID,
} from "@/utils/Const";
import InputEditor from "@/components/InputEditor/index.vue";
import draggable from "vuedraggable";
import { IComponentData } from "@/store/modules/editor";
export default defineComponent({
  components: {
    InputEditor,
    draggable,
  },
  props: {
    list: {
      type: Array as PropType<IComponentData[]>,
    },
  },
  setup(props: any) {
    const store = useStore<IGlobalDataProps>();
    let currentId = computed(() => store.state.editor.currentId);
    let dataList = computed(() => {
      return cloneDeep(props.list);
    });

    let endDraggable = () => {
      store.commit(`editor/${UPDATE_COMPONENT_LIST}`, cloneDeep(dataList.value));
    };

    let handleChange = (layerId: string, key: string, v: string | boolean) => {
      store.commit(`editor/${UPDATE_LAYER_PROPS}`, { layerId, key, v });
    };

    // 更新选中的组件ID
    let setActive = (id: string): void => {
      store.commit(`editor/${UPDATE_CURRENT_ID}`, id);
    };

    return {
      currentId,
      setActive,
      dataList,
      endDraggable,
      handleChange,
    };
  },
});
</script>

<style lang="scss" scoped>
.coverage {
  border-bottom: 1px solid #eeeeee;
  padding: 5px 0;
}
.coverage-active {
  border-bottom: 1px solid #f60;
  background: rgba(0, 0, 0, 0.1);
}
.move {
  cursor: move;
}
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>
